<template>
	<view>
		<view class="tab-button">
			<uni-segmented-control :current="current" :values="items" style-type="button"
				active-color="#993399" @clickItem="onClickItem" />
		</view>
			<view v-if="current === 0">
				<view>
					<view class="title">
						<view>名次</view><view>姓名</view><view>积分</view><view>等级</view>
					</view>
					<view v-for="(item, index) in memberIntegralList" :key="index" class="list-item">
						<view>{{index + 1}}</view>
						<view>{{item.memberName}}</view>
						<view>{{item.integralTotal}}</view>
						<view>{{ getItemInfo(item) }}</view>
					</view>
					<uni-load-more :status="status"></uni-load-more>
				</view>
			</view>
			<view v-if="current === 1">				
				<view class="integral-rule">
					<u-parse :content="pointsRule.ruleContent"></u-parse>
				</view>
			</view>
			<view v-if="current === 2">
				<view>
					<view v-for="(item, index) in scheduleList" :key="item.scheduleId" @click="showSchedule(item)" >
						<uni-card>
							<text>{{item.scheduleTitle}}</text>
						</uni-card>
					</view>
					<uni-load-more :status="scheduleStatus"></uni-load-more>
				</view>
			</view>
			<view v-if="current === 3">
				<view>
					<view v-for="(item, index) in imageList" :key="item.scheduleId" @click="showImage(item)">
						<uni-card :cover="getCover(item)">
							<text>{{item.scheduleTitle}}</text>
						</uni-card>
					</view>
					<uni-load-more :status="imageStatus"></uni-load-more>
				</view>
			</view>
		
	</view>
</template>

<script>
	import { sortMemberintegral } from "@/api/puyu/memberintegral";
  import { getLastRule } from "@/api/puyu/rule";
  import { sortSchedule, getScheduleMatch } from "@/api/puyu/schedule";
	import uParse from '@/components/u-parse/u-parse.vue'

	export default {
		components: {
			uParse
		},
		data() {
			return {
				gutter: 10,
				// 积分规则
				pointsRule: {},
				items: ['积分排名', '积分规则', '比赛赛程', '比赛图片'],
				current: 0,
				memberIntegralList: [], // 数据列表
				scheduleList: [], // 赛程列表
				imageList: [], // 图片列表
				total: null, // 总数据条数（从服务器获取）
				loading: false, // 是否正在加载数据
				noMoreData: false, // 是否已经没有更多数据可以加载
				totalSchedule: null, // 总数据条数（从服务器获取）
				loadingSchedule: false, // 是否正在加载数据
				noMoreDataSchedule: false, // 是否已经没有更多数据可以加载
				totalImage: null, // 总数据条数（从服务器获取）
				loadingImage: false, // 是否正在加载数据
				noMoreDataImage: false, // 是否已经没有更多数据可以加载
				// 积分排名查询参数
				queryParams: {
					pageNum: 1, // 当前页码
					pageSize: 15, // 每页显示的数据条数
					delFlag: '0',
					memberName: null,
					phone: null,
				},
				// 赛程查询参数
				scheduleParams: {
					pageNum: 1, // 当前页码
					pageSize: 15, // 每页显示的数据条数
				},
				// 赛程查询参数
				imageParams: {
					pageNum: 1, // 当前页码
					pageSize: 5, // 每页显示的数据条数
				},
				status: 'more',
				scheduleStatus: 'more',
				imageStatus: 'more',
			}
		},
		onReady() {
			
		},
		computed: {
		},
		created() {
			// 积分规则
			this.getLastRuleInfo();
		},
		onShow() {
			// 页面显示时加载第一页数据
			this.loadMore();
			this.loadMoreSchedule();
			this.loadMoreImage();
		},
		methods: {
			/** 积分规则 */
			getLastRuleInfo() {
				getLastRule().then(response => {
					this.pointsRule = response.data;
				});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			async loadMore() {
				let that = this;
				if (that.status == 'loading') {
					return false;
				}
				if (that.status == 'noMore') {
					return false;
				}
				that.status = 'loading';
				that.queryParams.orderByColumn = 'integralTotal'; //查询字段是表格中字段名字
				that.queryParams.isAsc = 'descending'; //动态取值排序顺序
				sortMemberintegral(that.queryParams).then(response => {
					if(response.rows.length == 0) {
						that.status = 'noMore';
					} else {
						that.memberIntegralList = that.memberIntegralList.concat(response.rows);
						if (response.rows.length == that.queryParams.pageSize) {
							that.status = 'more';
						} else {
							that.status = 'noMore';
						}
					}
				});
			},
			getItemInfo(item) {
				let level = '';
				if (item.integralTotal >= 1000) {
					level = '甲级';
				} else if (item.integralTotal >= 700) {
					level = '乙级';
				} else if (item.integralTotal >= 400) {
					level = '丙级';
				} else {
					level = '初级';
				}
				return level;
			},
			async loadMoreSchedule() {
				let that = this;
				if (that.scheduleStatus == 'loading') {
					return false;
				}
				if (that.scheduleStatus == 'noMore') {
					return false;
				}
				that.scheduleStatus = 'loading';
				that.scheduleParams.orderByColumn = 'scheduleId'; //查询字段是表格中字段名字
				that.scheduleParams.isAsc = 'descending'; //动态取值排序顺序
				sortSchedule(that.scheduleParams).then(response => {
					if(response.rows.length == 0) {
						that.scheduleStatus = 'noMore';
					} else {
						that.scheduleList = that.scheduleList.concat(response.rows);
						if (response.rows.length == that.scheduleParams.pageSize) {
							that.scheduleStatus = 'more';
						} else {
							that.scheduleStatus = 'noMore';
						}
					}
				});
			},
			showSchedule(item) {
				this.$tab.navigateTo('/pages/puyu/news/schedule-detail?scheduleId=' + item.scheduleId);
			},
			async loadMoreImage() {
				let that = this;
				if (that.imageStatus == 'loading') {
					return false;
				}
				if (that.imageStatus == 'noMore') {
					return false;
				}
				that.imageStatus = 'loading';
				that.imageParams.orderByColumn = 'scheduleId'; //查询字段是表格中字段名字
				that.imageParams.isAsc = 'descending'; //动态取值排序顺序
				sortSchedule(that.imageParams).then(response => {
					if(response.rows.length == 0) {
						that.imageStatus = 'noMore';
					} else {
						that.imageList = that.imageList.concat(response.rows);
						if (response.rows.length == that.imageParams.pageSize) {
							that.imageStatus = 'more';
						} else {
							that.imageStatus = 'noMore';
						}
					}
				});
			},
			showImage(item) {
				this.$tab.navigateTo('/pages/puyu/news/image-detail?scheduleId=' + item.scheduleId);
			},
			/** 赛程图片 */
			getCover(item) {
				if (item.image) {
					return item.image.split(',')[0];
				}
				return '';
			},
			onReachBottom() {
				if (this.current === 0) {
					if (this.status == 'more') {
						this.queryParams.pageNum += 1;
						this.loadMore();
					}
				} else if (this.current === 2) {
					if (this.scheduleStatus == 'more') {
						this.scheduleParams.pageNum += 1;
						this.loadMoreSchedule();
					}
				} else if (this.current === 3) {
					if (this.imageStatus == 'more') {
						this.imageParams.pageNum += 1;
						this.loadMoreImage();
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/components/u-parse/u-parse.css");
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}
	.tab-button {
		margin: 15rpx;
	}
	
	.integral-rule {
		margin: 15rpx;
		padding: 15rpx;
		background-color: #fff;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
	.title {
		margin: 15rpx 15rpx 0 15rpx;
		font-weight: bolder;
		height: 80rpx;
		// color: white;
		// background-color: purple;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
	
	.scroll-view {
		width: 750rpx;
		height: calc(100vh - 130rpx);
		overflow: hidden;
	}
	.list-item {
		margin: 15rpx;
		height: 80rpx;
		// height: 100rpx;
		padding: 15rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
	.loading-tip,
	.no-more-data-tip {
		padding: 10px;
		text-align: center;
		color: gray;
	}
</style>